/* 美化 <h2> 块，与列表风格一致但稍有区分 */
.section-title {
    font-size: 2rem; /* 比 <h4> 稍大 */
    font-weight: bold; /* 加粗字体 */
    color: #222; /* 更深一点的灰色，增加对比度 */
    border-bottom: 3px solid #0056b3; /* 更深的蓝色下划线，加粗 */
    padding-bottom: 10px; /* 下划线与文字的间距 */
    margin-bottom: 25px; /* 增加与下方内容的间距 */
    display: inline-block; /* 使下划线仅覆盖文字宽度 */
}

.section-title strong {
    color: inherit; /* 继承父元素的颜色 */
}

/* 文章列表与下载列表的样式 */
.article-section {
    margin-bottom: 30px;
}

.article-section h4 {
    color: #333; /* 使用与背景形成对比的颜色 */
    border-bottom: 2px solid #007bff; /* 主色调蓝色边框 */
    display: inline-block;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-weight: bold;
}

.article-list {
    list-style: none;
    padding-left: 0;
}

.article-list li {
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
    margin: 5px 0;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    transition: all 0.3s ease;
}

.article-list li:hover {
    background-color: rgba(255, 255, 255, 0.9); /* 悬停时更亮的背景色 */
    transform: translateY(-2px); /* 微小上移效果 */
}

.article-list a {
    text-decoration: none;
    color: #007bff; /* 主色调蓝色文字 */
    font-size: 16px;
    line-height: 1.5;
}

.article-list a:hover {
    text-decoration: underline;
}

.download-list li {
    border-left: 4px solid #28a745; /* 下载列表项使用绿色边框区分 */
}

.online-list li {
    border-left: 4px solid #007bff; /* 在线阅读列表项使用蓝色边框区分 */
}